<example name="Table">
  <file type="html" disable-auto-size>
    <div id="demo"></div>
  </file>
  <file type="css">
    body {
      margin: 0;
      padding: 0;
    }
  </file>
  <file type="js">
    import React, {Component, createElement} from 'react';
    import {render} from 'react-dom';
    import Table, {THEMES} from '@jetbrains/ring-ui/components/table/table';
    import Selection from '@jetbrains/ring-ui/components/table/selection';
    import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid';
    import Link from '@jetbrains/ring-ui/components/link/link';
    import Pager from '@jetbrains/ring-ui/components/pager/pager';
    import Button from '@jetbrains/ring-ui/components/button/button';
    import mock from '@jetbrains/ring-ui/components/table/table.examples.json';

    const pageSize = 7;
    const total = mock.length;

    class Example extends Component {
      state = {
        data: [],
        selection: new Selection(),
        caption: undefined,
        selectable: true,
        draggable: true,
        page: 1,
        pageSize,
        total,
        sortKey: 'country',
        sortOrder: true,
        loading: false,
        cleanUI: false
      }

      columns = [
        {
          id: 'country',
          title: 'Country',
          sortable: true
        },

        {
          id: 'id',
          title: 'ID',
          rightAlign: true
        },

        {
          id: 'city',
          title: 'City',
          sortable: true
        },

        {
          id: 'url',
          title: 'URL',
          getValue: ({url}) => <Link href={url}>{url}</Link>
        }
      ]

      onSort = ({column: {id: sortKey}, order: sortOrder}) => {
        this.setState({sortKey, sortOrder});
      }

      onPageChange = page => {
        this.setState({page});
      }

      componentWillMount() {
        this.loadPage();
      }

      componentDidUpdate(prevProps, prevState) {
        const {page, sortKey, sortOrder} = this.state;
        if (page !== prevState.page || sortKey !== prevState.sortKey || sortOrder !== prevState.sortOrder) {
          this.loadPage();
        }
      }

      isItemSelectable(item) {
        return item.id !== 14;
      }

      loadPage = () => {
        const {page, pageSize, sortKey, sortOrder} = this.state;

        let data = [...mock];
        data.sort((a, b) => a[sortKey].localeCompare(b[sortKey]) * (sortOrder ? 1 : -1));
        data = data.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);

        const selection = new Selection({data, isItemSelectable: this.isItemSelectable});

        this.setState({data, selection});
      }

      render() {
        const {
          data, caption, selectable, draggable, cleanUI,
          loading, page, pageSize, total, selection,
          sortKey, sortOrder
        } = this.state;

        return (
          <div>
            <Table
              data={data}
              columns={this.columns}
              theme={cleanUI ? THEMES.cleanUI : null}
              selection={selection}
              onSelect={selection => this.setState({selection})}
              onReorder={({data}) => this.setState({data})}
              loading={loading}
              onSort={this.onSort}
              sortKey={sortKey}
              sortOrder={sortOrder}
              caption={caption}
              selectable={selectable}
              isItemSelectable={this.isItemSelectable}
              draggable={draggable}
              autofocus={true}
            />

            <Grid>
              <Row>
                <Col>
                  <Pager
                    total={total}
                    pageSize={pageSize}
                    currentPage={page}
                    disablePageSizeSelector={true}
                    onPageChange={this.onPageChange}
                  />
                </Col>
              </Row>

              <Row>
                <Col>Active items: {[...selection.getActive()].map(item => item.country).join(', ')}</Col>
              </Row>

              <Row>
                <Col>
                  <Button onClick={() => this.setState({data: [...this.state.data]}) }>Recreate data array</Button>

                  <span id="button-non-selectable">
                  {
                    selectable
                    ? <Button onClick={() => this.setState({selectable: false})}>Non-selectable</Button>
                    : <Button onClick={() => this.setState({selectable: true})}>Selectable</Button>
                  }
                  </span>

                  {
                    draggable
                    ? <Button onClick={() => this.setState({draggable: false})}>Non-draggable</Button>
                    : <Button onClick={() => this.setState({draggable: true})}>Draggable</Button>
                  }

                  <span id="button-with-a-caption">
                  {
                    caption
                    ? <Button onClick={() => this.setState({caption: undefined})}>Without a caption</Button>
                    : <Button onClick={() => this.setState({caption: 'Countries'})}>With a caption</Button>
                  }
                  </span>

                  {
                    loading
                    ? <Button onClick={() => this.setState({loading: false})}>Not loading</Button>
                    : <Button onClick={() => this.setState({loading: true})}>Loading</Button>
                  }

                  <span id="button-clean-ui">
                  {
                    cleanUI
                    ? <Button onClick={() => this.setState({cleanUI: false})}>Normal UI</Button>
                    : <Button onClick={() => this.setState({cleanUI: true})}>Clean UI</Button>
                  }
                  </span>
                </Col>
              </Row>

              {page === 1 && data.length > 5 && <Row>
                <Col>
                  <span id="button-select-bulgaria">
                  {
                    selection.isSelected(data[3])
                    ? <Button onClick={() => this.setState({selection: selection.deselect(data[3])})}>Deselect {data[3].country}</Button>
                    : <Button onClick={() => this.setState({selection: selection.select(data[3])})}>Select {data[3].country}</Button>
                  }
                  </span>

                  <span id="button-select-finland">
                  {
                    selection.isSelected(data[5])
                    ? <Button onClick={() => this.setState({selection: selection.deselect(data[5])})}>Deselect {data[5].country}</Button>
                    : <Button onClick={() => this.setState({selection: selection.select(data[5])})}>Select {data[5].country}</Button>
                  }
                  </span>
                </Col>
              </Row>}
            </Grid>
          </div>
        );
      }
    }

    render(createElement(Example, {}), document.getElementById('demo'));
  </file>
</example>

<example name="MultiTable">
  <file type="html">
    <div id="demo"></div>
  </file>
  <file type="js">
    import React, {Component, createElement} from 'react';
    import {render} from 'react-dom';
    import MultiTable from '@jetbrains/ring-ui/components/table/multitable';
    import Table from '@jetbrains/ring-ui/components/table/table';
    import mock from '@jetbrains/ring-ui/components/table/table.examples2.json';
    import Selection from '@jetbrains/ring-ui/components/table/selection';

    class Example extends Component {
      columns1 = [
        {
          id: 'continent',
          title: 'Continent'
        },
        {
          id: 'url',
          title: 'URL'
        }
      ]

      selection1 = new Selection()

      columns2 = [
        {
          id: 'country',
          title: 'Country'
        },
        {
          id: 'city',
          title: 'City'
        },
        {
          id: 'url',
          title: 'URL'
        }
      ]

      selection2 = new Selection()


      render() {
        return (
          <MultiTable>
            <Table
              data={mock.continents}
              columns={this.columns1}
              caption="Continents"
              selection={this.selection1}
            />

            <Table
              data={mock.countries}
              columns={this.columns2}
              caption="Countries"
              autofocus={true}
              selection={this.selection2}
            />
          </MultiTable>
        );
      }
    }

    render(createElement(Example, {}), document.getElementById('demo'));
  </file>
</example>
